<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号 - 注册</title>
    <link rel="icon" type="images/x-icon" href="../images/favicon.ico" />
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/Puplic.css">
    <link rel="stylesheet" href="../css/Register.css">
</head>

<body>
    <div class="account-content">
        <!-- 左边图片 -->
        <div class="logo-left"></div>

        <!-- 右边账户 -->
        <div class="account-wrap">
            <div class="account-scroll">
                <div class="user-account">

                    <!-- 头部 -->
                    <div class="mi_header">
                        <div class="mi-title fl">
                            <img src="../images/logo-mi.png" alt="">
                            小米帐号
                        </div>
                        <div class="mi-nav fr">
                            <a href="javascript:;">用户协议</a>
                            <a href="javascript:;">隐私政策</a>
                            <a href="javascript:;">帮助中心</a>
                            <div class="mi-nav-line"></div>
                            <div class="mi-nav-item">
                                <div class="chinese">
                                    中文(简体)
                                </div>
                                <i class="iconfont down-arrow">&#xe647;</i>
                                <div class="chinese-menu">
                                    <ul>
                                        <li class="">中文(简体)</li>
                                        <li>中文(繁體)</li>
                                        <li>English</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 主体 -->
                    <div class="mi-container">
                        <dl class="mi-card">
                            <dt class="mi-corner">
                                <div class="btn-tab img-pvg"></div>
                            </dt>

                            <dd class="login-register">
                                <ul class="lore">
                                    <li class="tab-log">
                                        <a href="javascript:;">登录</a>
                                        <div class="tabs-bot"></div>
                                    </li>
                                    <li class="tab-register tab-active">
                                        <a href="javascript:;">注册</a>
                                    </li>
                                </ul>

                                <div class="tabs-content">
                                    <div class="tabs-login tabs-active">
                                        <form class="mi-form">
                                            <div class="login_account">
                                                <input name="account" id="xiaomi_id" type="text" autocomplete="off">
                                                <label for="xiaomi_id">邮箱/手机号码/小米ID</label>
                                            </div>

                                            <div class="login_password">
                                                <input name="password" id="xiaomi_password" type="password" autocomplete="off">
                                                <label for="xiaomi_password">密码</label>
                                                <i class="iconfont fr">&#xe901;</i>
                                            </div>

                                            <div class="checkbox-wrapper">
                                                <input type="checkbox" class="mi-checkbox">
                                                <span>
                                                    已阅读并同意小米帐号
                                                    <a href="javascript:;">用户协议</a>
                                                    和
                                                    <a href="javascript:;">隐私政策</a>
                                                </span>
                                            </div>

                                            <button type="submit" class="mi-button">登录</button>

                                            <div class="mi-form-action-wrap">
                                                <div class="mi-form-action fl">
                                                    <a href="javascript:;">忘记密码?</a>
                                                </div>
                                                <div class="mi-form-action fr">
                                                    <a href="../html/Register.html">立即注册</a>
                                                </div>
                                            </div>

                                            <!-- 其他方式登录 -->
                                            <div class="mi-sns-login">
                                                <div class="mi-login-title">其他方式登录</div>
                                                <div class="mi-login-content">
                                                    <ul class="mi-login-list">
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe670;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe607;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xfed8;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe6b2;</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                    <div class="tabs-register">
                                        <form class="mi-form">

                                            <div class="region-wrap">
                                                <div class="select-region">
                                                    <span class="region">中国</span>
                                                </div>
                                                <i class="iconfont select-arrow">&#xe69a;</i>
                                                <label class="country">国家/地区</label>
                                            </div>
                                            
                                            <div class="phone-wrap">
                                                <div class="countryCode-wrap">
                                                    <div class="select-countryCode">
                                                        <span>+86</span>
                                                    </div>
                                                    <i class="iconfont select-arrow">&#xe69a;</i>
                                                </div>
                                                <label class="countryCode">国家码</label>
                                                <input name="phone" id="phone" type="number" oninput="if(value.length > 11) value = value.slice(0,11)">
                                                <label for="phone" class="phone-num">手机号</label>
                                            </div>
                                            <span class="phone-correct">请输入正确的手机号</span>
                                            <span class="phone-Empty">手机号不得为空</span>

                                            <div class="textMessage-wrap">
                                                <input type="text" name="textMessage" oninput="if(value.length > 4) value = value.slice(0,4)" id="text-message">
                                                <label for="text-message">短信验证码</label>
                                                <div class="get-verificationCode">
                                                    <button type="button" id="verificationCode">获取验证码</button>
                                                </div>
                                            </div>
                                            <span class="SMS">请输入短信验证码</span>

                                            <div class="setPassword-wrap">
                                                <input type="password" id="setpassword" name="setPassword" oninput="if(value.length > 30) value = value.slice(0,30)">
                                                <label for="password">设置你的密码</label>
                                            </div>
                                            <span class="alphabetic-Characters">请使用字母、数字和字符三种组合，8-20个字符</span>
                                            
                                            <div class="password-strength">
                                                <ul class="pass-level">
                                                    <li class="weak">
                                                        <div class="weak-text">
                                                            <span>弱</span>
                                                        </div>
                                                    </li>
                                                    <li class="middle">
                                                        <div class="middle-text">
                                                            <span>中</span>
                                                        </div>
                                                    </li>
                                                    <li class="strong">
                                                        <div class="strong-text">
                                                            <span>强</span>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="confirmPassword_wrap">
                                                <input type="password" id="confirmPassword" name="confirmPassword">
                                                <label for="confirmPassword">再次确认你的密码</label>
                                            </div>
                                            <span class="inputPassword">请输入确认密码</span>
                                            <span class="passwordInconsistent">两次密码输入不一致，请重新输入</span>

                                            <div class="checkbox-wrapper">
                                                <input type="checkbox" class="mi-checkbox">
                                                <span>
                                                    已阅读并同意小米帐号
                                                    <a href="javascript:;">用户协议</a>
                                                    和
                                                    <a href="javascript:;">隐私政策</a>
                                                </span>
                                            </div>

                                            <input type="button" class="mi-button" value="立即注册">

                                            <div class="mi-form-action-wrap">
                                                <div class="mi-form-action fl">
                                                    <a href="javascript:;">收不到验证码?</a>
                                                </div>
                                                <div class="mi-form-action fr">
                                                    <a href="./Login.html">立即登录</a>
                                                </div>
                                            </div>

                                            <!-- 其他方式登录 -->
                                            <div class="mi-sns-login">
                                                <div class="mi-login-title">其他方式登录</div>
                                                <div class="mi-login-content">
                                                    <ul class="mi-login-list">
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe670;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe607;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xfed8;</a>
                                                        </li>
                                                        <li class="mi-login-item">
                                                            <a href="#" class="iconfont">&#xe6b2;</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </dd>

                            <dd class="pvg-box">
                                <div class="mi-scan-code-login">
                                    <div class="mi-scan-code-login">
                                        <h2 class="mi-mac-login-title">扫码登录 安全快捷</h2>
                                    </div>
                                    <div class="qr-box">
                                        <img src="../images/PVG.png" alt="">
                                    </div>

                                    <div class="mi-center-text">
                                        <span>请使用小米手机/米家等小米旗下APP扫码登录</span>
                                        <i class="iconfont">
                                            &#xe6c1;
                                        </i>
                                    </div>

                                    <div class="mi-scan-app">
                                        <div class="mi-login-title">支持扫码登录的App</div>
                                        <div class="mi-app-list">
                                            <a href="#" class="mi-app-item">
                                                <div class="app-img">
                                                    <img src="../images/米家.png" alt="">
                                                </div>
                                                <span>米家</span>
                                            </a>
                                            <a href="#" class="mi-app-item">
                                                <div class="app-img">
                                                    <img src="../images/App.png" alt="">
                                                </div>
                                                <span>小米商城</span>
                                            </a>
                                            <a href="#" class="mi-app-item">
                                                <div class="app-img">
                                                    <img src="../images/小米音响.png" alt="">
                                                </div>
                                                <span>小爱音响</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </div>

                    <!-- footer -->
                    <div class="mi-copyright">
                        小米公司版权所有-京ICP备10046444-
                        <a href="javascript:;">京公网安备11010802020134号</a>
                        -京ICP证110507号
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../libs/jquery.js"></script>
<script src="../libs/ajax.js"></script>
<script src="../js/Register.js"></script>
</html>